<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>悬停提示框 | 通知提示</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
	<link rel="stylesheet" href="../../assets/dest/css/notice_tooltip.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
	<style>
		.text {margin: 10px .25em; line-height: 1.5; color: #009dff; border-bottom: 1px dotted #5e7a8c; cursor: pointer;}
		.border {padding: 5px 10px; margin: 5px 10px; cursor: pointer; border: 1px solid #ddd;}
	</style>
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>悬停提示框</dd>
			<dt>描述：</dt>
			<dd>用于简短解释易产生歧义、疑惑的元素。注：不适合长文本显示。</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_font.css</code>
				<code>notice_tooltip.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<h4>用于解释文本：</h4>
		<p>
			中国成功加入<abbr class="o-tooltip" data-tooltip="世界贸易组织">WTO</abbr>
		</p>
		<hr>
		<h4>用于解释操作：</h4>
		<div>
			<span class="o-tooltip" data-tooltip="将保存您的所有更改">
				<button>保存</button>
			</span>
			<span class="o-tooltip" data-tooltip="删除后不可恢复">
				<button>删除</button>
			</span>
			<span class="o-tooltip" data-tooltip="你不是 VIP 用户，想都不要想">
				<button disabled>领取红包</button>
			</span>
		</div>
		<hr>
		<h4>提示框显示方向：</h4>
		<div>
			<span class="border o-tooltip" data-tooltip="上方的悬停提示">上方(默认)</span>
			<span class="border o-tooltip tooltip-bottom" data-tooltip="下方的悬停提示">下方</span>
			<span class="border o-tooltip tooltip-left" data-tooltip="左侧的悬停提示">左侧</span>
			<span class="border o-tooltip tooltip-right" data-tooltip="右侧的悬停提示">右侧</span>
		</div>
		<hr>
		<h4>默认显示：</h4>
		<p style="text-align:center">
			<span class="o-tooltip is-show" data-tooltip="充值 100 送 200 哦">
				<button onclick="go(this)">去充值</button>
			</span>
		</p>
	</div>
	<script>
		function go(btn) {
			btn.parentNode.classList.remove('is-show');
		}
	</script>
</body>
</html>
